<template>
  <div class="bg-light">
    <div class="container-title">基础设置</div>
    <Form ref="form" :label-width="100" :rules="rule" :model="form">
      <FormItem label="促销名称" prop="name">
        <Input v-model="form.name" placeholder="请输入促销名称" :maxlength="15" class="wp40" />
      </FormItem>
      <FormItem label="使用期限" prop="date">
        <fomatDate
          v-model="form.date"
          class="wp40"
          :date-value="form.date"
        />
        <!-- <DatePicker
            type="datetimerange"
            placement="bottom-end"
            v-model="form.date"
            :options="options"
            class="wp40"
            placeholder="请选择使用期限">
          </DatePicker> -->
      </FormItem>
      <Row>
        <i-col span="15">
          <FormItem label="活动对象" prop="grade">
            <CheckboxGroup v-model="form.grade">
              <Checkbox v-for="item in storeTypeData" :key="item.id" :label="item.value">{{ item.text }}</Checkbox>
            </CheckboxGroup>
          </FormItem>
        </i-col>
      </Row>
      <FormItem label="参与方式" prop="term">
        <CheckboxGroup v-model="form.term">
          <Checkbox v-for="item in termList" :key="item.id" disabled :label="item.id">{{ item.name }}</Checkbox>
        </CheckboxGroup>
      </FormItem>
      <FormItem label="优惠条件" prop="con">
        <Input v-model="form.con" style="width: 60px" :maxlength="5" /> 元
      </FormItem>
      <div class="col-ul">
        <div class="col-li">
          <span class="col-label">优惠内容</span><Checkbox v-model="form.reduceCheck" @on-change="onJoinReduce" />
          <FormItem prop="reduce">
            减<Input ref="getReducefocus" v-model="form.reduce" style="width: 60px" max="34" :disabled="form.isReduceDisable" :maxlength="5" />元
          </FormItem>
        </div>
        <div class="col-li">
          <Checkbox v-model="form.addCheck" @on-change="onAddBuy" />
          <FormItem prop="add">
            加价购<Input ref="getAddfocus" v-model="form.add" style="width: 60px" :maxlength="5" :disabled="form.isAddDisable" /> 元
          </FormItem>
        </div>
        <div class="col-li">
          <Checkbox v-model="form.giftCheck" :disabled="form.isGiftDisable" @on-change="onGetGift">送赠品</Checkbox>
        </div>
        <div class="col-li"><Checkbox v-model="form.isParcel" class="item-li">包邮(参加活动即可包邮)</Checkbox></div>
      </div>
      <Row class="hr">
        <FormItem label="活动备注">
          <Input v-model="form.remark" placeholder="请输入活动备注" type="textarea" :maxlength="128" class="wp40" />
        </FormItem>
      </Row>
    </Form>
  </div>
</template>
<script>
import fomatDate from '@/components/ChoseDateFormat'
export default {
  components: {
    fomatDate
  },
  props: {
    form: {
      type: Object
    }
  },
  data () {
    return {
      isReduceDisable: true,
      isAddDisable: true,
      isGiftDisable: false,
      options: {
        disabledDate (date) {
          return date && date.valueOf() < Date.now() - 86400000
        }
      },
      gradeList: [{
        id: 1,
        name: '普通会员'
      }, {
        id: 2,
        name: 'VIP'
      }, {
        id: 3,
        name: '黄金VIP'
      }],
      termList: [{
        id: 1,
        name: '部分商品参加'
      }],
      rule: {
        name: [{ required: true, message: '请输入促销名称', trigger: 'blur' }],
        intro: [{ required: true, message: '请输入促销说明', trigger: 'blur' }],
        date: [{
          required: true,
          message: '请开始时间',
          trigger: 'change',
          type: 'array'
          // fields: {
          //     0: {type: 'date', required: true, message: '请输入起止日期'},
          //     1: {type: 'date', required: true, message: '请输入起止日期'}
          // }
        }],
        grade: [{ required: true, type: 'array', message: '请选择活动对象', trigger: 'change' }],
        reduce: [{ validator: this.validateReduce, trigger: 'blur' }],
        add: [{ validator: this.validateAdd, trigger: 'blur' }],
        num: [{ required: true, message: '请选择限购数量', trigger: 'blur' }],
        con: [{ validator: this.validateCon, trigger: 'blur' }]
      }
    }
  },
  computed: {
    storeTypeData () {
      return this.$store.getters.storeTypeData
    }
  },
  mounted () {
    this.$store.dispatch('getStoreType')
  },
  methods: {
    // 优惠条件的输入框
    validateCon (rule, value, callback) {
      this.$store.commit('testCon', { rule, value, callback })
    },
    // 减的输入框
    validateReduce (rule, value, callback) {
      let status = this.$store.state.fullSubGiftSale.form.reduceCheck
      this.$store.commit('test', { rule, value, callback, status })
    },
    // 加价购输入框
    validateAdd (rule, value, callback) {
      let status = this.$store.state.fullSubGiftSale.form.addCheck
      this.$store.commit('addtest', { rule, value, callback, status })
    },
    onJoinReduce () {
      /*
        优惠内容
          giftCheck --check
      */
      this.$store.state.fullSubGiftSale.form.isReduceDisable = !this.$store.state.fullSubGiftSale.form.isReduceDisable
      if (this.$store.state.fullSubGiftSale.form.reduceCheck) {
        this.$refs.getReducefocus.focus()
      }
    },
    onAddBuy () {
      /* 加价购
          isAddDisable - input
          addCheck --check
         赠品
          giftCheck --check
      */
      this.$store.state.fullSubGiftSale.form.isAddDisable = !this.$store.state.fullSubGiftSale.form.isAddDisable
      if (this.$store.state.fullSubGiftSale.form.addCheck) {
        this.$refs.getAddfocus.focus()
      }
      if (this.$store.state.fullSubGiftSale.form.addCheck) {
        this.$store.state.fullSubGiftSale.form.giftCheck = true
        this.$store.commit('setGift', this.$store.state.fullSubGiftSale.form.giftCheck)
        this.$store.state.fullSubGiftSale.form.isGiftDisable = true
      } else {
        this.$store.state.fullSubGiftSale.form.giftCheck = false
        this.$store.commit('setGift', this.$store.state.fullSubGiftSale.form.giftCheck)
        this.$store.state.fullSubGiftSale.form.isGiftDisable = false
      }
    },
    onGetGift () {
      /*
        赠品
        giftCheck --check
      */
      this.$store.commit('setGift', this.$store.state.fullSubGiftSale.form.giftCheck)
    }
  }
}
</script>
